<script type="text/javascript" language="JavaScript">
	{literal}

	var AntzBSHandlerConfig = {/literal}{$handler_json}{literal};

	$(document).ready(function(){
		AntzBSHandler.init(AntzBSHandlerConfig);
		AntzBSHandler.displayControls(AntzBSHandlerConfig.focusedElement);
		AntzBSHandler.focusWindow({/literal}'{$handler->focusedWindow}'{literal});
		AntzBSHandler.renderPreview();
	});
	{/literal}
</script>




{*
CSS OUTPUT WINDOW
*}

<div id="JFX_Module_Blockstyle_Output" class="jfx-toolbar" xml:state="{$handler->outputNodeState}" xml:focus_state="output"
	style="{if ($handler->outputNodeState == 'closed')}display: none; {/if}
	{if ($handler->focusedWindow == 'output')}z-index: 84; {/if}
left: {$handler->outputNodePositionLeft}; top: {$handler->outputNodePositionTop}"
>
<div class="jfx-toolbar-header">
	<h3 class="minimized-heading">CSS Output</h3>
	<a href="javascript: void(null)"
		onclick="AntzBSHandler.toggleCssOutputState()" class="jfx-toolbar-minimize-button"
	>
		<img src="{$imageUrl}/admin/layout/minimize-black.png" alt="Minimize" />
	</a>


</div>
<div class="jfx-toolbar-wrapper"><div class="jfx-toolbar-content pre">
{$outputCss}
<div class="JFX_Module_Blockstyle_Clear"></div>
</div></div>



</div>














{*
PREVIEW WINDOW
*}


<div id="JFX_Module_Blockstyle_Preview" class="jfx-toolbar" xml:state="{$handler->previewNodeState}" xml:focus_state="preview"
	style="{if ($handler->previewNodeState == 'closed')}display: none; {/if}
	{if ($handler->focusedWindow == 'preview')}z-index: 84; {/if}
left: {$handler->previewNodePositionLeft}; top: {$handler->previewNodePositionTop}"
>
<div class="jfx-toolbar-header">
	<h3 class="minimized-heading">Preview</h3>
	<a href="javascript: void(null)"
		onclick="AntzBSHandler.togglePreviewState()" class="jfx-toolbar-minimize-button"
	>
		<img src="{$imageUrl}/admin/layout/minimize-black.png" alt="Minimize" />
	</a>


</div>
<div class="jfx-toolbar-wrapper">
<div class=" content pre">

The content goes here

</div>
<div class="ruler">

</div>
</div>

</div>



<div id="JFX_Module_Blockstyle_Selector">
	<select onchange="AntzBSHandler.displayClassname(this)">
		{section loop=$allClassnames name=i}
			<option value="{$allClassnames[i].classname}" {if $allClassnames[i].classname == $selectedClassname}selected="selected"{/if}>
				{$allClassnames[i].title}
			</option>
		{/section}
	</select>
	<select onchange="AntzBSHandler.displayTemplate(this)">
		<option value="default">Default Content</option>
		{section loop=$allTemplates name=i}
			<option value="{$allTemplates[i].value}" {if $allTemplates[i].value == $selectedTemplate}selected="selected"{/if}>
				{$allTemplates[i].title}
			</option>
		{/section}
	</select>

</div>





<div id="JFX_Module_Blockstyle_Elements">

	{foreach from=$groupedElements key=groupId item=group}
	<div>
		<div class="jfx-toolbar-header"><h2>{$group.title}</h2></div>
		<div>
		<ul>
			{foreach from=$group.elements key=className item=element}
			<li class="jfx-element-{$element->id}{if $element->id==$handler->focusedElement} selectedElement {/if}"><input type="checkbox" name="enable_{$element->id}" xml:id="{$element->id}"
					   onchange="AntzBSHandler.toggleElement('{$element->id}')"
					   {if $element->enabled}checked="checked"{/if}
					   />

			{if $element->enabled}
			<a href="javascript: void(null)" onclick="AntzBSHandler.displayControls('{$element->id}')">
			{/if}

			<span>{$element->title}</span>

			{if $element->enabled}
			</a>
			{/if}


			</li>
			{/foreach}
		</ul>
		</div>
	</div>
	{/foreach}
		

</div>



<ul class="JFX_Module_Blockstyle_WindowTabs">
	<li><a href="javascript: void(null);" onclick="AntzBSHandler.toggleCssOutputState()">CSS Output</a></li>
	<li><a href="javascript: void(null);" onclick="AntzBSHandler.togglePreviewState()">Preview</a></li>
</ul>


<h2 id="JFX_Module_Blockstyle_Editing_Element_Title"></h2>





<div id="JFX_Module_Blockstyle_Controls"><!-- class="jfx-toolbar" xml:state="{$handler->controlNodeState}" xml:focus_state="control"
	style="{if ($handler->controlNodeState == 'closed')}display: none; {/if}
	{if ($handler->focusedWindow == 'control')}z-index: 84; {/if}
left: {$handler->controlNodePositionLeft}; top: {$handler->controlNodePositionTop}"
>
<div class="jfx-toolbar-header">
	<h3 class="minimized-heading">Settings</h3>
	<a href="javascript: void(null)"
		onclick="AntzBSHandler.toggleControlState()" class="jfx-toolbar-minimize-button"
	>
		<img src="{$imageUrl}/admin/layout/minimize-black.png" alt="Minimize" />
	</a>


</div>
<div class="jfx-toolbar-wrapper"--><div class="jfx-toolbar-content widgets pre">

{* controls go here when the element is focussed *}

</div><!--/div-->

</div>





<div class="JFX_Module_Blockstyle_Clear"></div>



























